<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>

<html>
<style>
#main {
	margin: auto;
	width: 800px;
}
#courseList {
	width: 100%;
	margin-top: 50px;
}

#courseList table,
#courseList td,
#courseList th {
	border: 1px solid gray;
	border-collapse: collapse;
	text-align: center;
}

.header {
	text-align: center;
	margin: 50px auto 20px;
}

#courseList table {
	width: 100%;
	table-layout: fixed;
}
#courseList table input {
	width: 100%;
}
#courseList td {
	padding: 2px;
}
</style>
<body>
	<div id="main">
		<jsp:include page="banner.jsp">
			<jsp:param name="page" value="courseManage" />
		</jsp:include>
		<div id="courseList">
		</div>
	</div>
</body>
<script>

function updateCourse(action, elem){
	var cells = elem.parentNode.parentNode.cells;
	
	var xhr = new XMLHttpRequest(),
		params = {}, params2 = [];
	xhr.open('POST', "servlet/CourseManage", true);
	params['action'] = action;
	params['courseID'] = cells[0].innerHTML;
	params['courseName'] = cells[1].firstChild.value;
	params['description'] = cells[2].firstChild.value;
	params['teacher'] = cells[3].firstChild.value;
	
	for (var i in params){
		params2.push(i + '=' + encodeURIComponent(params[i]));
	}
	
	xhr.onreadystatechange = function(){
		if (xhr.readyState==4 && xhr.status==200) {
			console.log(xhr.responseText);
			loadData();
		}
	};
	
	params2 = params2.join("&");
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhr.setRequestHeader("Content-length", params2.length);
	
	xhr.send(params2);
}

function loadData(){
	var xhr = new XMLHttpRequest();
	
	xhr.open("GET", "servlet/CourseQuery", false);
	
	xhr.send("null");
	
	eval("var data = " + xhr.responseText);
	
	var tableHTML = '<table>';
	tableHTML += '<colgroup><col width="5%"></col><col width="20%"></col><col width="45%"></col><col width="15%"></col><col width="15%"></colgroup>';
	tableHTML += '<tr><th>#</th><th>课程名称</th><th>描述</th><th>任课老师</th><th>操作</th></tr>';
	for (var i = 0; i < data.length; i++ ){
		tableHTML += '<tr>';
		tableHTML += '<td>' + data[i].courseID + '</td>';
		tableHTML += '<td><input value="' + data[i].name + '" name="name"></td>';
		tableHTML += '<td><input value="' + data[i].description + '" name="description"></td>';
		tableHTML += '<td><input value="' + data[i].teacher + '" name="teacher"></td>';
		tableHTML += '<td><button onclick="updateCourse(\'update\', this);">更新</button>' 
					   + '<button onclick="updateCourse(\'delete\', this);">删除</button></td>';
		tableHTML += '</tr>';
	}
	tableHTML += '<tr style="border-top:3px solid black;">';
	tableHTML += '<td></td>';
	tableHTML += '<td><input name="name"></td>';
	tableHTML += '<td><input name="description"></td>';
	tableHTML += '<td><input name="teacher"></td>';
	tableHTML += '<td><button onclick="updateCourse(\'add\', this);">新增</button></td>';
	tableHTML += '</tr>';
	tableHTML += '</table>';
	
	var div = document.getElementById('courseList');
	if (!div){
		div = document.createElement('div');
		div.id = 'courseList';
		document.body.appendChild(div);
	}
	div.innerHTML = tableHTML;
}

window.onload = function(){
	loadData();
};
</script>
</html>